<template>
  <div>
    <!--  select区域  -->
    <div class="select-warp">
      <span style="margin-left: 40px;font-size: 18px;font-weight: bold">一级分类</span>
      <el-select slot="prepend" v-model="selecta" placeholder="请选择" style="margin:20px 20px" :disabled="selectDisabled">
        <el-option v-for="item in getCategoryIData " :key="item.id" :label="item.name" :value="item.name" @click.native="getcategory2Id(item.id)" />
      </el-select>
      <span style="font-size: 16px;font-weight: bold">二级分类</span>
      <el-select slot="prepend" v-model="selectb" placeholder="请选择" style="margin:20px 20px" :disabled="selectDisabled">
        <el-option v-for="item in getcategory2Data" :key="item.id" :label="item.name" :value="item.name" @click.native="getcategory3Name(item.id)" />
      </el-select>
      <span style="font-size: 14px;font-weight: bold">三级分类</span>
      <el-select slot="prepend" v-model="selectc" placeholder="请选择" style="margin:20px 20px" :disabled="selectDisabled">
        <el-option v-for="item in getcategory3Data" :key="item.id" :label="item.name" :value="item.name" @click.native="getshopList(item.id)" />
      </el-select>
    </div>
    <!--    table区域-->
    <el-card style="margin-top: 40px">
      <el-button type="primary" :disabled="disabled" @click="addAttrs">添加属性</el-button>
      <el-table
        :data="tableData"
        height="250"
        border
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="180"
        />
        <el-table-column
          prop="attrName"
          label="属性名称"
          width="180"
        />
        <el-table-column
          prop="attrValueList"
          label="属性值列表"
        >
          <template slot-scope="scope">
            <el-tag v-for="item in scope.row.attrValueList " :key="item.id" type="success" style="margin-right: 40px;margin-top: 5px">{{ item.valueName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="240">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
            >编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!--    添加-->
    <el-card v-show="isShow" style="margin-top: 40px;position: relative;top:-380px;left: 0px;width: 100%">
      <span> 属性名  <span />
        <el-input v-model="attrText" placeholder="请输入内容" style="width: 30%" @input="attrTextChange" />
        <div style="margin-top: 20px">
          <el-button type="primary" icon="el-icon-plus" :disabled="saveDisabled" @click.native="addAttrValueaddAttrValue">添加属性值</el-button>
          <el-button @click="cancelAttr">取消</el-button>
        </div>
        <!--     添加属性值 table区域-->
        <el-table
          :data="attrValueList"
          style="width: 100%;margin-top: 20px;"
        >
          <el-table-column
            label="序号"
            width="260"
            type="index"
          />
          <el-table-column
            prop="valueName"
            label="属性值名称"
            width="360"
          >
            <template slot-scope="{row,$index}">
              <el-input :ref="$index" v-model="attrValueList[$index].valueName" size="mini" @blur="changeStatus($index)" />
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="danger"
                @click="deleteAttr(scope)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-top: 20px">
          <el-button type="primary" :disabled="saveDisabledB" @click="saveAttr">保存</el-button>
          <el-button @click="cancelAddAttr">取消</el-button>
        </div>

      </span></el-card>
  </div>
</template>

<script>
import { addsShopAttr, deleteAttr, getCategory, getCategory2Id, getCategory3Id, getshopList } from '@/api/shopAttr'
export default {
  name: 'Attr',
  data() {
    return {
      selecta: '',
      selectb: '',
      selectc: '',
      getCategoryIData: [],
      getcategory2Data: [],
      getcategory3Data: [],
      // 请求商品属性的列表
      reqlist: {
        category1Id: '',
        category2Id: '',
        category3Id: ''
      },
      // 下拉框默认不是禁用
      selectDisabled: false,
      // 表格
      tableData: [],
      // 添加的表格
      attrValueList: [],
      // 莫仍加按钮不可选
      disabled: true,
      // 添加的模板开始不显示
      isShow: false,
      // 添加里面的按钮默认不可选
      saveDisabled: true,
      saveDisabledB: true,
      attrText: '',
      // 请求添加时的对象
      attrObj: {
        'attrName': 'string',
        'attrValueList': [],
        'categoryId': 0,
        'categoryLevel': 0
      }
    }
  },
  mounted() {
    this.getCategoryIid()
  },
  methods: {
    async getCategoryIid() {
      const res = await getCategory()
      if (res.code === 200) {
        this.getCategoryIData = res.data
      }
    },
    // 获取二级分类
    async getcategory2Id(id) {
      this.reqlist.category1Id = id
      this.selectb = ''
      const res = await getCategory2Id(id)
      if (res.code === 200) {
        this.getcategory2Data = res.data
      }
    },
    // 获取三级分类
    async getcategory3Name(id) {
      this.reqlist.category2Id = id
      this.selectc = ''
      const res = await getCategory3Id(id)
      if (res.code === 200) {
        this.getcategory3Data = res.data
      }
    },
    // 获取商品属性列表
    async getshopList(id) {
      this.reqlist.category3Id = id
      const { category1Id, category2Id, category3Id } = this.reqlist
      const res = await getshopList(category1Id, category2Id, category3Id)
      if (res.code === 200) {
        this.tableData = res.data
        this.disabled = false
      }
    },
    // 添加属性的按钮
    addAttrs() {
      this.isShow = true
      this.selectDisabled = true
      this.attrValueList = []
      this.attrText = ''
    },
    // 添加input有数据时
    attrTextChange() {
      //  按钮不禁用
      this.saveDisabled = false
    },
    // 点击添加属性的按钮时
    addAttrValue() {
      this.attrValueList.push({
        attrId: 0,
        id: 0,
        valueName: '',
        isShow: true
      })
      console.log('本来的', this.attrValueList)
    },
    // 校验是不是空
    changeStatus($index) {
      if (!this.attrValueList[$index].valueName) {
        this.$message.error('请输入有效的属性名')
        return
      }
      this.saveDisabledB = false
    },
    // 删除某一项
    deleteAttr(scope) {
      this.attrValueList.splice(scope.$index, 1)
    },
    // 添加属性名的取消置空
    cancelAttr() {
      this.attrText = ''
    },
    // 添加的属性值的取消
    cancelAddAttr() {
      this.attrValueList = []
      this.isShow = false
    },
    // 点击保存发送新增属性
    async saveAttr() {
      // 发送新增的请求
      this.attrObj.attrName = this.attrText
      this.attrObj.attrValueList = this.attrValueList
      this.attrObj.categoryId = this.reqlist.category3Id
      this.attrObj.categoryLevel = this.reqlist.category3Id
      const res = await addsShopAttr(this.attrObj)
      // console.log(res)
      if (res.code === 200) {
        this.isShow = false
        this.getshopData()
      }
    },
    // 封装了重新发请求
    async getshopData() {
      const { category1Id, category2Id, category3Id } = this.reqlist
      const reslut = await getshopList(category1Id, category2Id, category3Id)
      console.log(reslut)
      if (reslut.code === 200) {
        this.tableData = reslut.data
        this.selectDisabled = false
      }
    },
    // 编辑区域
    handleEdit(index, row) {
      this.isShow = true
      this.saveDisabled = false
      this.attrText = row.attrName
      this.attrValueList = row.attrValueList
      this.attrObj.categoryId = row.categoryId
    },
    // 删除区域
    async handleDelete(index, row) {
      console.log(row)
      const res = await deleteAttr(row.id)
      if (res.code === 200) {
        this.getshopData()
      }
    }
  }
}
</script>

<style scoped>
.select-warp{
  margin-top: 40px;
  width: 100%;
  height: 100px;
  border: 1px solid #EBEEF5;
  box-shadow:10px 10px 15px #F6F6F6;
}
 .el-table::before{
   height: 0;
 }
</style>
